{% extends './management_base.html' %}

{% block title %}分类管理{% end %}

{% block body %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">
            分类管理
        </h1>
    </div>
    <div class="card">
        <div class="card-header">
            <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#newCategoryModal">
                <i class="fe fe-plus mr-2"></i>新增分类
            </button>
            <div class="col-lg-3 ml-auto">
                <form class="input-icon my-3 my-lg-3">
                    <input type="text" class="form-control header-search" placeholder="分类查询" name="search">
                    <div class="input-icon-addon">
                        <button type="button" class="btn btn-secondary" onclick="queryCompany()"><i class="fe fe-search"></i></button>
                    </div>
                </form>
            </div>
        </div>
        <div class="dimmer" id="dimmer_body">
            <div class="loader"></div>
            <div class="table-responsive dimmer-content">
                <table class="table card-table table-vcenter text-nowrap datatable">
                    <thead>
                        <tr>
                            <th class="w-1">No.</th>
                            <th>名称</th>
                            <th>文章数量</th>
                            <th>创建时间</th>
                            <th>编辑</th>
                            <th>删除</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>暂无数据！</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" name="pagnate" style="text-align: center;">
            <label>共 <span id="data_count">0</span> 条</label>
            <label>每页 <select name="the_limit" class="select">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                </select> 条</label>
            <label>
                <button class="btn btn-blue" id="previou_page">上一页</button>
                <label><span id="current_page">1</span> / <span id="total_page">1</span></label>
                <button class="btn btn-blue" id="next_page">下一页</button>
            </label>
        </div>
    </div>
</div>

<!-- 新增分类的模态框 -->
<div class="modal fade" id="newCategoryModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="card-status bg-blue"></div>
                <h4 class="text-center" id="modal_title">新增分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="dimmer" id="newCateModal">
                <div class="loader"></div>
                <form class="card-body dimmer-content">
                    <input type="hidden" name="company_id" value="">
                    <div class="form-group">
                        <label class="form-label">名称<span class="form-required">*</span></label>
                        <input type="text" class="form-control" name="category_name" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary" onclick="newCategory()">确认</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 编辑分类的模态框 -->
<div class="modal fade" id="UpdateCategoryModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="card-status bg-green"></div>
                <h4 class="text-center" id="modal_title">编辑分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="dimmer" id="updateCateModal">
                <div class="loader"></div>
                <form class="card-body dimmer-content">
                    <input type="hidden" name="category_id" value="">
                    <div class="form-group">
                        <label class="form-label">名称<span class="form-required">*</span></label>
                        <input type="text" class="form-control" name="category_name" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary" onclick="goUpdate()">更新</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 删除分类的模态框 -->
<div class="modal fade" id="delCategoryModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="card-status bg-red"></div>
                <h4 class="text-center" id="modal_title">删除分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="dimmer" id="delCateModal">
                <div class="loader"></div>
                <form class="card-body dimmer-content">
                    <input type="hidden" name="category_id" value="">
                    <div class="form-group">
                        <label class="form-label">名称<span class="form-required">*</span></label>
                        <input type="text" class="form-control" name="category_name" value="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary" onclick="goDel()">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    require(["jquery"], function($){
        console.log("初始化内容。")
        getDate()

        // 点击上一页
        $("#previou_page").click(() => {
            console.log("当前第 " + $("#current_page")[0].innerText + " 页")
            if ($("#current_page")[0].innerText == 1) {
                console.log("当前已是第一页！")
            } else {
                getDate(page = parseInt($("#current_page")[0].innerText) - 1, limit = $("select[name=the_limit]").val())
            }
        })

        // 点击下一页
        $("#next_page").click(() => {
            console.log("当前第 " + $("#current_page")[0].innerText + " 页")
            if ($("#current_page")[0].innerText == $("#total_page")[0].innerText) {
                console.log("当前已是最后一页！")
            } else {
                getDate(page = parseInt($("#current_page")[0].innerText) + 1, limit = $("select[name=the_limit]").val())
            }
        })

        // 选择每页多少数据
        $("select[name=the_limit]").change(() => {
            let limit_c = $("select[name=the_limit]").val()
            console.log(limit_c)
            getDate(page = 1, limit = limit_c)
        })
    })

    function getDate(page=1, limit=5){
        $("#dimmer_body").addClass("active")
        $.ajax("/api/category_data", {
            method: "GET",
            data: {
                page: parseInt(page),
                limit: parseInt($("select[name=the_limit]").val() || limit),
                // company_name: $("input[name=search]").val()
            }
            }).done(function (data) {
                console.log(data)
                if (data["status"] == 1) {
                    $("#current_page")[0].innerText = page
                    // 总条数
                    $("#data_count")[0].innerText = data["data"]["data_count"]
                    // 分几页
                    $("#total_page")[0].innerText = Math.ceil(data["data"]["data_count"] / limit)
                    if (data["data"]["data_count"]>0){
                        $("tbody").empty()
                    }else{
                        setEmpty()
                    }
                    // 拼接数据
                    for (i = 0; i < data["data"]["data_list"].length; i++) {
                        addDataList(data["data"]["data_list"][i], i + 1)
                    }
                } else {
                    showAlert(0, data["msg"])
                    return false
                }
            }).fail(function (xhr, error) {

            }).always(function () {
                $("#dimmer_body").removeClass("active")
            })
    }
    // 拼接数据
    function addDataList(data, data_index){
        let tbody = $("tbody")[0]
        let new_tr = document.createElement("tr")
        let data_id = data["id"]
        let data_name = data["name"]
        let post_count = data["post_count"]
        let data_create_time = data["create_time"]

        new_tr.innerHTML = `<td>${data_index}</td>
                            <td>${data_name}</td>
                            <td>${post_count}</td>
                            <td>${data_create_time}</td>
                            <td>
                                <a class="icon" href="javascript:void(0)" data-toggle="modal"
                                    data-target="#UpdateCategoryModal" onclick="getInfoModal(${data_index}, ${data_id})">
                                    <i class="fe fe-edit"></i>
                                </a>
                            </td>
                            <td>
                                <a class="icon" href="javascript:void(0)" data-toggle="modal"
                                    data-target="#delCategoryModal" onclick="getInfoModal(${data_index}, ${data_id})">
                                    <i class="fe fe-trash-2"></i>
                                </a>
                            </td>`
        tbody.append(new_tr)
    }
    function setEmpty(){
        $("tbody").empty()
        let tbody = $("tbody")[0]
        let new_tr = document.createElement("tr")
        new_tr.innerHTML = `<td>暂无数据！</td>`
        tbody.append(new_tr)
    }

    // 新增
    function newCategory(){
        let nameInput = $("input[name=category_name]").val()
        if (nameInput == ""){
            showAlert(0, "输入不能为空！")
            return false
        }
        $("#newCateModal").addClass("active")
        $.ajax("/api/new_category", {
            method: "POST",
            contentType: "application/json",
            dataType: "json",
            headers: {},
            data: JSON.stringify({
                category_name: nameInput,
            })
        }).done(function(data){
            if (data["status"]==1){
                showAlert(1, data["msg"])
                $("#newCategoryModal").modal("hide")
                getDate()
            }else{
                showAlert(0, data["msg"])
                return false
            }
        }).fail(function(xhr, error){

        }).done(()=>{
            $("#newCateModal").removeClass("active")
        })
    }

    // 获取点击该行分类信息的模态框
    function getInfoModal(n, data_id){
        let tr = $("tbody tr")[n-1]
        $("input[name=category_id]").val(data_id)
        $("input[name=category_name]").val(tr.children[1].innerText)
    }

    // 更新
    function goUpdate(){
        let category_id = $("#updateCateModal input[name=category_id]").val()
        let nameInput = $("#updateCateModal input[name=category_name]").val()
        if (nameInput == ""){
            showAlert(0, "输入不能为空！")
            return false
        }
        $("#updateCateModal").addClass("active")
        $.ajax("/api/update_category", {
            method: "PUT",
            contentType: "application/json",
            dataType: "json",
            headers: {},
            data: JSON.stringify({
                category_id: category_id,
                category_name: nameInput,
            })
        }).done(function(data){
            if (data["status"]==1){
                showAlert(1, data["msg"])
                $("#UpdateCategoryModal").modal("hide")
                getDate()
            }else{
                showAlert(0, data["msg"])
                return false
            }
        }).fail(function(xhr, error){

        }).done(()=>{
            $("#updateCateModal").removeClass("active")
        })
    }

    // 删除
    function goDel(){
        let category_id = $("#delCateModal input[name=category_id]").val()
        $("#delCateModal").addClass("active")
        $.ajax("/api/del_category", {
            method: "DELETE",
            contentType: "application/json",
            dataType: "json",
            headers: {},
            data: JSON.stringify({
                category_id: category_id,
            })
        }).done(function(data){
            if (data["status"]==1){
                showAlert(1, data["msg"])
                $("#delCategoryModal").modal("hide")
                getDate()
            }else{
                showAlert(0, data["msg"])
                return false
            }
        }).fail(function(xhr, error){

        }).done(()=>{
            $("#delCateModal").removeClass("active")
        })
    }

</script>
{% end %}